import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ListView } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';
import CouponCell from '../../components/coupon/couponCell.escort';
import CouponRuleModal from '../../components/coupon/couponRuleModal';
import WillPage from '../../components/coupon/willPage';
import TelModal from '../../components/coupon/telModal';
import { get } from '../../utils/storage';

@connect(({ coupon, user,insurance }) => {
  return {
    useable: coupon.getIn(['couponList', 'useable']),
    unuseable: coupon.getIn(['couponList', 'unuseable']),
    user: user.get('user'),
    showWill:insurance.get("showWill")
  };
})
class CouponList extends BaseComponent {
  static propTypes = {
    type: PropTypes.oneOf(['all', 'useable']),

  }
  static defaultProps = {
    type: 'all',
  }

  state = {
    tabIndex: 0,
    showPageNum:0
  }
  componentDidMount() {
    let showPageNum=get("showPageNum");
    this.setState({
      showPageNum:showPageNum
    })
    this.requestData(1);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user !== this.props.user && nextProps.user.get('token')) {
      this.requestData(1);
    }
  }

  changeTab = (tabIndex) => {
    this.setState({ tabIndex });
    setTimeout(() => {
      this.requestData(1);
    }, 300);
  }

  requestData = (targetPage) => {
    const { tabIndex } = this.state;
    const { useable, unuseable, type } = this.props;
    let page;
    if (targetPage) {
      page = targetPage;
    } else {
      page = (tabIndex === 0 ? useable : unuseable).get('page') + 1;
    }

    let status;
    if (type === 'useable') {
      status = 2;
    } else if (tabIndex === 0) {
      status = 0;
    } else {
      status = 1;
    }
    this.props.dispatch({
      type: 'coupon/fetchCouponList',
      payload: {
        source: window.source,
        targetPage: page,
        pageSize: 10,
        status,
      },
    });
    this.props.dispatch({
      type:'insurance/fetchShowWill'
    })
  }

  showRule = (coupon) => {
    if (coupon.isActive()) {
      this.modal.show(coupon.get('oilCompanyName').join('、'), coupon.get('content'));
    }
  }
  closePage=()=>{
 
    this.props.dispatch({
      type: 'insurance/updateWill',
      payload: {
          renewalIntention: 0,
      },
    });  
  }
  showTel=()=>{
   this.telmodal.show();
   this.props.dispatch({
    type: 'insurance/updateWill',
    payload: {
        renewalIntention: 1,
    },
  });  
  }
  closeInfo=()=>{
    this.props.dispatch({
      type: 'insurance/showPage',
      payload: {
          show: false,
      },
    }); 
   
  }

  renderTab = () => {
    const { tabIndex } = this.state;
    return (
      <div className="header">
        <div className="title-view">
          我的卡券
        </div>
        <div className="tab-view">
          <div className={`tab-cell ${tabIndex === 0 ? 'active' : ''}`} onClick={() => this.changeTab(0)}>可使用</div>
          <div className={`tab-cell ${tabIndex === 1 ? 'active' : ''}`} onClick={() => this.changeTab(1)}>不可使用</div>
        </div>
      </div>
    );
  }

  render() {
    const { useable, unuseable, history, type, dispatch, showWill } = this.props;
    const { tabIndex,showPageNum } = this.state;
    const data = tabIndex === 0 ? useable : unuseable;
    const list = data.get('list');
    const hasMore = data.get('hasMore');
    const cells = list.map((coupon, index) => {
      return (
        <div className="coupon-wrapper" key={index}>
          <CouponCell coupon={coupon} type="escort" history={history} dispatch={dispatch} clickFunc={this.showRule} />
          <div className="circle-view">
            <div className="circle left" />
            <div className="circle right" />
          </div>
          <div className="coupon-footer">
            <div className="text-row">
              <i className="iconfont icon-question" />
              <p className="text">中油BP全站。收银员在POS点击“现金券”使用。</p>
            </div>
          </div>
        </div>
      );
    });
    return (
      <div className="coupon-list">
       {(type!=='all'&&showPageNum!==1)? <WillPage closeFunc={this.closePage} clickFunc={this.showTel} show={showWill} /> : null}
        <TelModal ref={telmodal => this.telmodal = telmodal} clickFunc={this.closeInfo} />
        {type === 'all' ? this.renderTab() : null}
        <ListView
          className="list"
          loadMore={this.requestData}
          hasMore={hasMore}
          empty={this.renderEmpty()}
          renderFooter={this.renderFooter}
        >
          {cells}
        </ListView>
        <CouponRuleModal ref={modal => this.modal = modal} />
      </div>
    );
  }
}

export default CouponList;
